@charset "utf-8";

/* **************************************************

Name: layout.css

Description: Setting of page layout

Create: 2007.10.XX
Update: 2012.04.04

Copyright 2007 Hitachi, Ltd. 

***************************************************** */



/* content===========================================

[-] Skip Link
[s1] Header
[s2] Site identity
[s3] Global navigation
[s4] Horizontal local navigation
[s5] Topic Path
[-] Content
[s6] Vertical local navigation
[s7] Footer
[-] common class

===================================================== */



/* [-] Skip Link
=========================================================================================== */
#top {
background-color:#3e3a39;
line-height:2;
font-size:83%;
text-align:center;
margin:0;
}
#top a {
color:#ffffff;
background:url('../index_files/icon/icon_skiplink.gif') left center no-repeat;
padding-left:18px;
position:absolute;
top:-10em;
}
#top a.focus {
position:static;
margin:5px 0 6px;
padding-bottom:3px;
zoom:1;
}



/* [s1] Header
=========================================================================================== */

div#Header {
margin: 0 auto;
padding: 2px 0 2px;
width: 765px;
}
div#Header ul#UtilityTools {
float: left;
margin: 3px 0 0;
font-size: 83%;
}
div#Header ul#UtilityTools li {
float: left;
margin: 0 8px 0 0;
padding: 2px 0 8px 35px;
background: url("../index_files/icon/icon_zoom_sight.gif") no-repeat 0 3px;
}
div#Header div#Search {
float: left;
margin: 3px 0 0 2px;
}
div#Header div#Search fieldset { float: left; }
div#Header div#Search legend { display: none; }
div#Header div#Search p { font-size: 83%; }
div#Header div#Search p input,
div#Header div#Search p img { vertical-align: middle; }
div#Header div#Search input#SearchTextBox {
padding: 1px;
border: 1px solid #999999;
}
div#Header ul#Region {
float: right;
margin: 5px 0 0;
font-size: 83%;
}
div#Header ul#Region li {
display: inline;
padding: 1px 0;
}
div#Header ul#Region li a {
padding: 0 0 0 15px;
vertical-align: middle;
background: url("../index_files/icon/icon_link_header.gif") no-repeat 0 0;
}
div#Header ul#Region li.RightSeparater {
display: inline;
background: url("../index_files/bg_u_navi_separater.gif") no-repeat 100% 50%;
padding: 1px 8px 1px 0;
}
div#Header ul#Region li.Country {
padding: 1px 0 1px 8px;
}
div#Header ul#Region li.Country img { vertical-align: middle; }



/* [s2] Site identity
=========================================================================================== */

/* ---[s2] Site identity > staging unit > top page--- */
div#SiteIdentityL {
margin: 0 auto;
width: 765px;
font-size: 0;
text-align: left;
}
div#SiteIdentityL h1.Title {
float: left;
width: 609px;
height: 83px;
background: url("../index_files/bg_site_id_large.gif") repeat-x 0 0 #e6e6e6;
}
div#SiteIdentityL p.Statement {
float: right;
padding: 1px 1px 0 0;
width: 155px;
height: 82px;
background: url("../index_files/bg_corp_id_large.gif") repeat-x 0 0;
}


/* ---[s2] Site identity > staging unit > normal page--- */
div#SiteIdentityS {
margin: 0 auto;
width: 765px;
font-size: 0;
text-align: left;
}
div#SiteIdentityS p.Title  {
float: left;
width: 653px;
height: 60px;
background: url("../index_files/bg_site_id_small.gif") repeat-x 0 0 #e6e6e6;
}
div#SiteIdentityS p.Statement {
float: right;
padding: 1px 1px 0 0;
width: 111px;
height: 59px;
background: url("../index_files/bg_corp_id_small.gif") repeat-x 0 0;
}



/* [s3] Global navigation
=========================================================================================== */

div#GlobalNavi {
margin: 0 auto;
padding: 10px 0 0;
width: 765px;
text-align: left;
}
div#GlobalNavi div {
padding: 0 0 7px;
background: url("../index_files/bg_g_navi_separater.gif") no-repeat 0 100%;
}
div#GlobalNavi ul.CourtesyNavi {
float: right;
padding: 3px 0;
text-align: right;
font-size: 83%;
}
div#GlobalNavi ul.CourtesyNavi li {
display: inline;
margin: 0 0 0 5px;
padding: 1px 0 1px 15px;
background: url("../index_files/icon/icon_link_header.gif") no-repeat 0 1px;
white-space: nowrap;
}
ul#GlobalNaviTop {
float: left;
font-size: 83%;
}
ul#GlobalNaviTop li {
float: left;
margin: 0 3px 0 0;
background: url("../index_files/bg_g_navi_top_l.gif") no-repeat 0 0 #d7d7d7;
}
ul#GlobalNaviTop li a {
float: left;
display: block;
padding: 5px 8px 7px;
border-bottom: 1px solid #b6b6b6;
background: url("../index_files/bg_g_navi_top_r.gif") no-repeat 100% 0;
white-space: nowrap;
}
ul#GlobalNaviTop li.Current { background: url("../index_files/bg_g_navi_top_l_on.gif") no-repeat 0 0 #d3d3d3; }
ul#GlobalNaviTop li.Current a {
padding: 5px 8px 8px;
border: none;
background: url("../index_files/bg_g_navi_top_r_on.gif") no-repeat 100% 0;
text-decoration: none;
}
ul#GlobalNaviTop li.Current a em { font-style: normal; }
ul#GlobalNaviTop li.Current a:link em { color: #08427c; text-decoration: underline; } 
ul#GlobalNaviTop li.Current a:visited em { color: #551a8b; text-decoration: underline; }
ul#GlobalNaviTop li.Current a:hover em { color: #890000; text-decoration: underline; }
ul#GlobalNaviTop li.Current a:active em { color: #890000; text-decoration: underline; }

ul#GlobalNaviTop li.Current a strong {
padding: 0 4px;
background-color: #3e3a39;
color: #ffffff;
font-weight: normal;
text-decoration: none;
}



/* [s4] Horizontal local navigation
=========================================================================================== */

ul#HorizontalLocalNavi {
margin: -7px 0 0;
clear: left;
padding: 4px 8px 15px;
background: url("../index_files/bg_g_navi_bottom.gif") no-repeat 0 100%;
}
ul#HorizontalLocalNavi li {
display: inline;
margin: 0 3px 0 0;
padding: 3px 10px 1px 0;
background: url("../index_files/bg_g_navi_bottom_separater.gif") no-repeat 100% 50%;
font-size: 83%;
}
/* IE7 & IE6lower */
* html ul#HorizontalLocalNavi li { margin: 0 7px 0 0; padding: 1px 7px 1px 0; }
*:first-child+html ul#HorizontalLocalNavi li { margin: 0 7px 0 0; padding: 1px 7px 1px 0; }
/* */
ul#HorizontalLocalNavi li a { white-space: nowrap; }

ul#HorizontalLocalNavi li.Current a { text-decoration: none; } 

ul#HorizontalLocalNavi li.Current a em {
padding: 0 4px 1px;
background-color: #bbbbbb;
font-style: normal;
}
ul#HorizontalLocalNavi li.Current a:link em { color: #08427c; text-decoration: underline; } 
ul#HorizontalLocalNavi li.Current a:visited em { color: #551a8b; text-decoration: underline; }
ul#HorizontalLocalNavi li.Current a:hover em { color: #890000; text-decoration: underline; }
ul#HorizontalLocalNavi li.Current a:active em { color: #890000; text-decoration: underline; }

ul#HorizontalLocalNavi li.Current a strong {
padding: 0 4px 1px;
background-color: #3e3a39;
color: #ffffff;
font-weight: normal;
text-decoration: none;
}



/* [s5] Topic Path
=========================================================================================== */

div#TopicPath {
margin: 0 auto 4px;
width: 750px;
padding: 0 0 0 15px;
background: url("../index_files/icon/icon_topic_path_first.gif") no-repeat 0 4px;
text-align: left;
}
div#TopicPath ul { font-size: 67%; }

div#TopicPath ul li {
float: left;
margin: 1px 3px 0 0;
padding: 2px 0 3px 13px;
background: url("../index_files/icon/icon_topic_path_transition.gif") no-repeat 0 4px;
line-height: 1.2;
white-space: nowrap;
}
div#TopicPath ul li.FirstItem {
padding: 2px 0 3px;
background: none;
}
div#TopicPath ul li strong { font-weight: normal; }



/* [-] Content Setting
=========================================================================================== */

div#Contents {
margin: auto;
width: 765px;
text-align: left;
}
.TopBorderSet {
padding: 15px 0 0;
border-top: 1px solid #c9caca;
}
div#Contents.TopMarginSet { margin: 8px auto 0; }



/* [s6] Vertical local navigation
=========================================================================================== */

div.Grid1 div#VerticalLocalNavi {
margin: 0 0 15px;
border-top: 1px solid #d6d6d6;
border-bottom: 1px solid #d6d6d6;
}
/* IE7 */
*:first-child+html div.Grid1 div#VerticalLocalNavi { border-bottom: 0; }
/* */
div.Grid1 div#VerticalLocalNavi h2 {
margin: 0;
border-top: none;
font-size: 83%;
}
div.Grid1 div#VerticalLocalNavi h2 a {
display: block;
padding: 7px 7px 14px;
background: url("../index_files/bg_l_navi_top.gif") 0 100% no-repeat #d6d6d6;
font-weight: normal;
}
div.Grid1 div#VerticalLocalNavi ul {
border: 1px solid #d6d6d6;
border-top: none;
background-color: #d6d6d6;
font-size: 83%;
}
div.Grid1 div#VerticalLocalNavi li {
margin-bottom: -1px;
border-top: 1px solid #d6d6d6;
font-size: 100%;
}
div.Grid1 div#VerticalLocalNavi ul li.FirstItem { border-top: none; }

div.Grid1 div#VerticalLocalNavi a {
display: block;
padding: 5px 5px 7px 7px;
width: 166px;
background: url("../index_files/bg_l_navi_level1.gif") 0 100% repeat-x #ffffff;
}
div.Grid1 div#VerticalLocalNavi ul ul li { border-top: 1px solid #d6d6d6; }

div.Grid1 div#VerticalLocalNavi ul ul {
margin-top: -1px;
border-top: 1px solid #d6d6d6;
border-left: none;
border-right: none;
font-size: 100%;
}
div.Grid1 div#VerticalLocalNavi ul ul a {
display: block;
padding: 5px 5px 8px 18px;
width: 155px;
background-color: #eeeeee;
background-image: none;
}
div.Grid1 div#VerticalLocalNavi ul ul ul li {
margin-bottom: -1px;
border: none;
}
div.Grid1 div#VerticalLocalNavi ul ul ul {
border-top: 1px solid #d6d6d6;
border-left: none;
border-right: none;
font-size: 100%;
}
div.Grid1 div#VerticalLocalNavi ul ul ul a {
display: block;
padding: 5px 5px 8px 26px;
width: 147px;
background: url("../index_files/bg_l_navi_level3.gif") 0 0 no-repeat #dddddd;
}
div.Grid1 div#VerticalLocalNavi ul ul ul li.FirstItem a { background-image: none; }

div#VerticalLocalNavi li li li.Current a { text-decoration: none; }

div#VerticalLocalNavi li.Current a em {
padding: 0 4px 1px;
background-color: #bbbbbb;
font-style: normal;
}
div#VerticalLocalNavi li.Current a:link em { color: #08427c; text-decoration: underline; }
div#VerticalLocalNavi li.Current a:visited em { color: #551a8b; text-decoration: underline; }
div#VerticalLocalNavi li.Current a:hover em { color: #890000; text-decoration: underline; }
div#VerticalLocalNavi li.Current a:active em { color: #890000; text-decoration: underline; }

div#VerticalLocalNavi li.Current a strong {
padding: 0 4px 1px;
background-color: #3e3a39;
color: #ffffff;
font-weight: normal;
text-decoration: none;
}



/* [s7] Footer
=========================================================================================== */

div#Footer {
margin: 0 auto;
padding: 8px 0 6px;
width: 765px;
background-color: #e6e6e6;
line-height: 0;
}
div#Footer h2 {
position: absolute;
top: -9999px;
left: -9999px;
}
div#Footer ul {
float: left;
font-size: 83%;
}
div#Footer ul li {
float: left;
margin: 0 5px 0 0;
padding: 0 0 0 5px;
border-left: 1px solid #555555;
line-height: 1.2;
}
div#Footer ul li.FirstItem {
padding: 0 0 0 15px;
border: none;
}
div#Footer p {
float: right;
padding: 3px 15px 0 0;
font-size: 67%;
line-height: 1.2;
}



/* [-] common class
=========================================================================================== */

div#Header:after,
div#SiteIdentityL:after,
div#SiteIdentityS:after,
div#TopicPath:after,
div.Grid1 div#VerticalLocalNavi:after,
div#Footer:after {
display: block;
clear: both;
height: 0;
visibility: hidden;
content: ".";
}
div#Header,
div#SiteIdentityL,
div#SiteIdentityS,
div#TopicPath,
div.Grid1 div#VerticalLocalNavi,
div#Footer { display: inline-block; }

/* Hides from IE 4-6 \*/
* html div#Header,
* html div#SiteIdentityL,
* html div#SiteIdentityS,
* html div#TopicPath,
* html div.Grid1 div#VerticalLocalNavi,
* html div#Footer { height: 1%; }

div#Header,
div#SiteIdentityL,
div#SiteIdentityS,
div#TopicPath,
div.Grid1 div#VerticalLocalNavi,
div#Footer { display: block; } 
/* End hide from IE 4-6 */


